<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>模拟一个数据监测</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            let data = {
                name: "清华",
                address: "北京"
            }

            // 创建一个监视的实例对象，用于监视data中属性的变化
            const obs = new Observer(data)

            // 准备一个vm实例对象
            let vm = {}
            vm._data = data = obs

            function Observer(obj) {
                // 汇总对象中所有的属性形成一个数组
                const keys = Object.keys(obj)
                // 遍历
                keys.forEach((k)=>{
                    Object.defineProperty(this, k, {
                        get(){
                            return obj[k]
                        },
                        set(val){
                            console.log(`${k}被改了,我要去解析模板，生成虚拟DOM，进行diff比较，。。。。`)
                            obj[k] = val
                        }
                    })
                })
            }
        </script>
    </body>
</html>
